<template>
  <div class="myfans" style="margin: 20px;">
      <el-card class="box-card" style="display: flex;">
          <div v-for="item in myfanlist" :key="item.id" class="text item"
              style="display: flex;width: 220px;flex-direction: column;justify-content: center; align-items: center;padding: 10px 0;">
              <el-image style="width: 100px; height: 100px;border-radius: 15px;" :src="item.headSculpture"
                  :fit="fit"></el-image>
              <el-link :underline="false" style="margin-top: 12px;" @click="toPersonal(item.studentId)">{{ item.username }}</el-link>
          </div>
      </el-card>
  </div>

</template>


<script>
// 导入api
import API from "@/api/request";

export default {
  inject: ['reload'],
  data() {
      return {
          user: {},
          myfanlist: []
      }
  },
  methods: {
      getuserfocus() {
          API.get("/api/plateManagement/userfanslist", {
              params: {
                  "userid": this.user.studentId
              }
          }).then(res => {
              if (res.data.code == 200) {
                  console.log(res)
                  this.myfanlist = res.data.data;
                  console.log(res.data.data)
                  console.log(this.myfanlist)
              }

          })
      },
      //跳转个人中心页
      toPersonal(id) {
          console.log("点击了")
          this.$router.push({ path: '/personal', query: { userid: id} })
      }

  },
  created() {
      this.user = sessionStorage.getItem('user') ? JSON.parse(sessionStorage.getItem('user')) : {}
      console.log(this.user)
      this.getuserfocus();
  },
};
</script>

<style scoped>
.el-row {
  margin-bottom: 20px;

  &:last-child {
      margin-bottom: 0;
  }
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

>>> .el-card__body, .el-main {
  padding: 20px;
  display: flex;
}
</style>